* {
    font-size: 14px;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
    outline: medium;
    font-style: normal;
    list-style: none;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
}

body {
    height: 100vh;
    width: 100vw;
}


/********* 浮动 ********/

.fl {
    float: left;
}

.fr {
    float: right;
}

.relative {
    position: relative;
}

.pointer {
    cursor: pointer;
}


/********* 文字位置 ********/

.tl {
    text-align: left;
}

.tc {
    text-align: center
}

.tr {
    text-align: right;
}

.strong {
    font-weight: bold;
}

.layout {
    width: 100%;
}


/************************ 循环 ************************/

$directions:("t":"top", "b":"bottom", "l":"left", "r":"right");
$dimensions:("p":"padding", "m":"margin");
@each $dim in $dimensions {
    //循环外边距和外环四个方向
    @each $dir in $directions {
        @for $i from 1 through 100 {
            $size: $i*1;
            .#{nth($dim,1)}#{nth($dir,1)}#{$size} {
                #{nth($dim,2)}-#{nth($dir,2)}: #{$size}px;
            }
        }
    }
}

@for $i from 1 through 100 {
    .w#{$i} {
        width: $i *1%
    }
    .f#{$i} {
        font-size: $i *1px
    }
    .lh#{$i} {
        line-height: $i *1px
    }
    .mg#{$i} {
        margin: $i *1px
    }
    .mglr#{$i} {
        margin-right: $i *1px;
        margin-left: $i *1px;
    }
    .mgtb#{$i} {
        margin-top: $i *1px;
        margin-bottom: $i *1px;
    }
    .pd#{$i} {
        padding: $i *1px
    }
    .pdlr#{$i} {
        padding-right: $i *1px;
        padding-left: $i *1px;
    }
    .pdtb#{$i} {
        padding-top: $i *1px;
        padding-bottom: $i *1px;
    }
}

.mg {
    margin: 0;
}

.pd {
    padding: 0;
}


/********** flex ***********/

.flex {
    display: flex;
}

.flex-warp {
    flex-wrap: wrap;
}

.dir-column {
    flex-direction: column;
}

.just-between {
    justify-content: space-between;
}

.just-center {
    justify-content: center;
}

.just-end {
    justify-content: flex-end;
}

.just-start {
    justify-content: flex-start;
}

.align-start {
    align-items: flex-start
}

.align-center {
    align-items: center;
}

.align-bottom {
    align-items: flex-end;
}


/********* 文本省略 ***********/

.text1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text3 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text4 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.text0 {
    overflow: auto;
    text-overflow: initial;
    white-space: normal;
}


/*********** 动画过滤 ************/

.transition-3s {
    transition: all .3s;
}

.transition-5s {
    transition: all .5s;
}


/********** 隐藏与显示 **********/

.hide {
    display: none;
}

.show {
    display: block;
}


/********** 钱字符号 **********/

.text-price {
    position: relative;
    &::before {
        content: "￥";
    }
}


/********** 图标 **********/

.ico {
    display: inline-block;
    background: transparent no-repeat;
    background-size: 100% 100%;
}

// .ico.icon_xx {
//     width: 13px;
//     height: 16px;
//     background-image: url(/src/assets/images/icon/icon_dw.png);
// }